<form nz-form [formGroup]="form">
  <nz-form-item>
    <nz-form-label>姓名</nz-form-label>
    <nz-form-control>
      <nz-input-group nzPrefixIcon="user">
        <input nz-input placeholder="姓名" [readonly]="true" formControlName="fullName"/>
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label nzRequired>原密码</nz-form-label>
    <nz-form-control [nzErrorTip]="errOldPwdMsg">
      <nz-input-group nzPrefixIcon="lock" [nzSuffix]="suffixOldPwd">
        <input [type]="oldPwdVisible ? 'text' : 'password'" nz-input formControlName="oldpwd" placeholder="原密码"
               maxlength="10"/>
      </nz-input-group>
      <ng-template #suffixOldPwd>
        <i nz-icon [nzType]="oldPwdVisible ? 'eye-invisible' : 'eye'" (click)="oldPwdVisible = !oldPwdVisible"></i>
      </ng-template>
      <ng-template #errOldPwdMsg>
        <ng-container *ngIf="oldpwd.errors.required">
          请输入原密码！
        </ng-container>
        <ng-container *ngIf="oldpwd.errors.maxlength">
          密码的长度不能大于10！
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label nzRequired>新密码</nz-form-label>
    <nz-form-control [nzErrorTip]="errNewPwdMsg">
      <nz-input-group nzPrefixIcon="lock" [nzSuffix]="suffixNewPwd">
        <input [type]="newPwdVisible ? 'text' : 'password'" nz-input formControlName="newpwd" placeholder="新密码"
               maxlength="10"/>
      </nz-input-group>
      <ng-template #suffixNewPwd>
        <i nz-icon [nzType]="newPwdVisible ? 'eye-invisible' : 'eye'" (click)="newPwdVisible = !newPwdVisible"></i>
      </ng-template>
      <ng-template #errNewPwdMsg>
        <ng-container *ngIf="newpwd.errors.required">
          请输入新密码!
        </ng-container>
        <ng-container *ngIf="newpwd.errors.minlength">
          密码的长度不能小于6！
        </ng-container>
        <ng-container *ngIf="newpwd.errors.maxlength">
          密码的长度不能大于10！
        </ng-container>
        <ng-container *ngIf="newpwd.errors.samepwd">
          新密码与原密码不能一样，请修改！
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label nzRequired>密码确认</nz-form-label>
    <nz-form-control [nzErrorTip]="errorBewPwd2Tpl">
      <nz-input-group nzPrefixIcon="lock" [nzSuffix]="suffixchkpwd">
        <input [type]="chkpwdVisible ? 'text' : 'password'" nz-input formControlName="chkpwd" placeholder="新密码确认"
               maxlength="10"/>
      </nz-input-group>
      <ng-template #suffixchkpwd>
        <i nz-icon [nzType]="chkpwdVisible ? 'eye-invisible' : 'eye'" (click)="chkpwdVisible = !chkpwdVisible"></i>
      </ng-template>
      <ng-template #errorBewPwd2Tpl>
        <ng-container *ngIf="chkpwd.hasError('required')">
          请再次输入新密码！
        </ng-container>
        <ng-container *ngIf="chkpwd.hasError('confirm')">
          新密码的两次输入必须一样！
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <div *nzModalFooter>
    <button nz-button nzGhost nzType="primary" (click)="onClose()">关闭</button>
    <button nz-button nzType="primary" (click)="onSave()"
            [nzLoading]="isLoading">
      保存
    </button>
  </div>
</form>
